<script setup lang="ts">
import { defineVaDataTableColumns } from 'vuestic-ui'
import { AuthData, AuthStatus } from '../a_DataAuth/types'
import UserPhoto from '../../components/UserPhoto.vue'
import ProjectStatusBadge from '../a_ProjectMine/components/ProjectStatusBadge.vue'
import { useAuthData } from '../a_DataAuth/composables/useAuthData'
import { Pagination } from '../../data/pages/projects'
import { ref } from 'vue'

const pagination = ref<Pagination>({ page: 1, perPage: 7, total: 0 })
const { authData, isLoading, sorting } = useAuthData({
  pagination,
})

const avatarColor = (userName: string) => {
  const colors = ['primary', '#FFD43A', '#ADFF00', '#262824', 'danger']
  const index = userName.charCodeAt(0) % colors.length
  return colors[index]
}

const statusText: Record<AuthStatus, string> = {
  '': '',
  reject: '已拒绝',
  approve: '已同意',
  waiting: '待审批',
}

const statusColors: Record<AuthStatus, string> = {
  '': '',
  reject: 'danger',
  approve: 'info',
  waiting: 'warning',
}

const columns = defineVaDataTableColumns([
  { label: '样本名称', key: 'name', sortable: true },
  { label: '申请者', key: 'getter', sortable: true },
  { label: '状态', key: 'status', sortable: false },
])
</script>

<template>
  <VaCard>
    <VaCardTitle class="flex items-start justify-between">
      <h1 class="font-bold uppercase card-title text-secondary">授权审批</h1>
      <VaButton preset="primary" size="small" to="/data/auth">进入</VaButton>
    </VaCardTitle>
    <VaCardContent>
      <div v-if="authData.length > 0">
        <VaDataTable
          v-model:sort-by="sorting.sortBy"
          v-model:sorting-order="sorting.sortingOrder"
          :items="authData"
          :columns="columns"
          :loading="isLoading"
        >
          <template #cell(name)="{ rowData }">
            <div style="font-weight: bolder">
              {{ rowData.name }}
            </div>
          </template>
          <template #cell(getter)="{ rowData }">
            <div style="font-weight: bolder" class="flex items-center gap-2 ellipsis max-w-[230px]">
              <UserPhoto :user="rowData.getter" size="small" />
              {{ rowData.getter.name }}
            </div>
          </template>
          <template #cell(status)="{ rowData }">
            <VaBadge :text="statusText[rowData.status]" :color="statusColors[rowData.status as AuthStatus]" />
          </template>
          <template #cell(deadline)="{ rowData }">
            <div v-if="rowData.deadline" class="time">
              {{ rowData.deadline }}
            </div>
          </template>
          <template #cell(actions)="{ rowData }">
            <!-- <VaBadge
        v-if="rowData.status !== 'waiting'"
        :text="statusText[rowData.status]"
        :color="statusColors[rowData.status as AuthStatus]"
      /> -->
            <div class="flex justify-start gap-2">
              <VaButton
                v-if="rowData.status === 'waiting'"
                preset="primary"
                size="small"
                icon="mso-done"
                aria-label="同意申请"
                @click="onUserAgree(rowData as AuthData)"
              />
              <!-- @click="$emit('agree-data', rowData as AuthData)" -->
              <VaButton
                v-if="rowData.status === 'waiting'"
                preset="primary"
                size="small"
                icon="mso-close"
                color="danger"
                aria-label="拒绝申请"
                @click="onUserReject(rowData as AuthData)"
              />
            </div>
          </template>
        </VaDataTable>
      </div>
      <div v-else class="p-4 flex justify-center items-center text-[var(--va-secondary)]">No Data</div>
    </VaCardContent>
  </VaCard>
</template>
